const path = require("path")
const {
  CleanWebpackPlugin
} = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
  entry: {
    'index': "./src/index.js"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name].js"
  },
  module: {
    rules: [{
        test: /\.(png|jpe?g|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            name: "[name]_[hash].[ext]", // 编译的文件名
            outputPath: "./images", // 打包后的文件位置
            publicPath: "./images", // 打包后的文件访问路径
            limit: 100, // 小于100B时转成base64
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader:MiniCssExtractPlugin.loader
          },
          {
            loader: "css-loader",
            options: {
              // 启用/禁用 url() 处理
              url: true,
              // 启用/禁用 @import 处理
              import: true,
              // 启用/禁用 Sourcemap
              sourceMap: false
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html', // 模版路径及模版名称
      filename: "index.html", // 输出文件名
      title: "开课吧",
    }),
    new MiniCssExtractPlugin({
      filename: './css/[name].css'
    })

  ],
  devServer: {
    port: 8081,
    // contentBase: '../kkb', //扩展外部目录
    hot: true, // 开启热更新
    hotOnly: true, // 即使HMR不生效,也不去刷新整个页面

  }
}